<template>
	<view class="home-container">
		<Search />
		<Preference :preferdata="preferdata"/>
		<Title />
		<!-- catchtouchmove 事件穿透 -->
		<view @click="poll()" :catchtouchmove="true">
			<Delicacy id="boxFixed" :class="{ 'is_fixed': isFixed }" @selected="selected"></Delicacy>
		</view>
		<view style="height: 50upx;"></view>
		<Takeout :takeshop="takeshop"/>
	</view>
</template>

<script>
import Search from './components/Search.vue'
import Preference from './components/Preference.vue'
import Title from './components/Title.vue'
import Delicacy from './components/Delicacy.vue'
import Takeout from './components/Takeout.vue'
import {  getContentUrl, getPreferenceUrl } from '../../api/request.js'
import { getData } from '../../api/preference/index.js'
import { mapState } from 'vuex'
	export default {
		components: {
			Search,
			Preference,
			Title,
			Delicacy,
			Takeout
		},
		data() {
			return {
				menutop: '', // 筛选的距离
				rect: '', // 滑动到顶部的距离
				topData: 0, // 顶部距离
				isFixed: false, //置顶后的样式是否出现
				takeshop: [], //内容 数据
				preferdata: [], //为你优选
			}
		},
		onLoad() {
			this.getInfo()
			this.loadingData()
		},
		onPageScroll(e) { // 监听页面滚动距离
			this.rect = e.scrollTop // 462
		},
		watch: {
			rect () { //监听筛选组件置顶和不置顶
				if(this.rect > this.menutop) { //如果页面滚动的高度大于筛选组件距离顶部的高度,那就置顶
					this.isFixed = true
				} else { //不置顶
					this.isFixed = false
				}
			},
			// ...mapState(['screenData']),
			// count () { //筛选出的商家数据
			// 	this.takeshop = this.screenData.screenArr
			// }
		},
		methods: {
			getInfo(){
				// 监听筛选组件距离顶部的组件
				this.$nextTick(() =>{
					const query = uni.createSelectorQuery().in(this);//创建节点查询器 query
					query.select('#boxFixed').boundingClientRect()
					query.exec(res => {
						this.menutop = res[0].top
						this.topData = res[0].top
					})
				})
			},
			poll() { //回到顶部
				uni.pageScrollTo({
					scrollTop: this.topData + 2,
					duration: 1000
				})
			},
			async loadingData () {
				// promise.all请求并发多个接口
				// const res = await getpreferenceData(getContentUrl)
				// this.takeshop = res[1].data
				const res = await Promise.all([getData(getPreferenceUrl), getData(getContentUrl)])
				this.preferdata = res[0].data
				this.takeshop = res[1].data
			},
			selected(res) {
				this.takeshop = res
			}
		}
	}
</script>

<style scoped>
	.home-container{
		margin: 0 15upx;
	}
	.is_fixed{
		background-color: #ffffff;
		position: fixed;
		left: 0;
		top: 90upx;
		right: 0;
		z-index: 999;
	}
</style>
